<template>
  <div class="mine">
    <div class="content">
      <!-- 头部区域 -->
      <div class="top">
        <img :src="userinfo.photo" alt="" class="logo" />
        <span class="telnumber">{{ userinfo.name }}</span>
        <span class="renzheng">申请认证</span>
      </div>
      <!-- 底部个人社交区域 -->
      <div class="bottom">
        <span class="item"
          ><span>{{ userinfobox.art_count }}</span> <i>动态</i></span
        >
        <span class="item"
          ><span>{{ userinfobox.follow_count }}</span> <i>关注</i></span
        >
        <span class="item"
          ><span>{{ userinfobox.fans_count }}</span> <i>粉丝</i></span
        >
      </div>
    </div>
    <!-- 进入编辑资料页面 -->
    <van-cell class="aa" title="编辑资料" value="" @click="bianji">
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
      <template #icon>
        <van-icon name="edit" class="bb" />
      </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 进入小思同学页面 -->
    <van-cell class="aa" title="小思同学" value="" @click="tocustomerservice">
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
      <template #icon>
        <van-icon name="more-o" class="bb" />
      </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 退出登录按钮 -->
    <van-cell class="aa" title="退出登录" value="" @click="loingoutshow = true">
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
      <template #icon>
        <van-icon name="warning-o" class="bb" />
      </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 确认退出弹出框 -->
    <van-dialog
      v-model="loingoutshow"
      title="提示"
      show-cancel-button
      @confirm="querenloginout"
    >
      <div class="loginout">确认退出吗?</div>
    </van-dialog>
  </div>
</template>

<script>
import { getuserinfo } from '../../api/userinfo'
import { mapState } from 'vuex'
export default {
  // 组件名称
  name: 'mine',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      userinfobox: {},
      loingoutshow: false
    }
  },
  computed: {
    ...mapState(['userinfo'])
  },
  // 获取个人资料
  async created () {
    const res = await getuserinfo()
    this.userinfobox = res.data.data
    this.$store.commit('setuserinfo', res.data.data)
  },
  methods: {
    // 进入编辑个人资料页面
    bianji () {
      this.$router.push('/userinfo')
    },
    // 确认退出登录功能
    querenloginout () {
      this.$store.commit('settoken', '')
      this.$router.replace('/login')
    },
    // 进入小思同学对话页面
    tocustomerservice () {
      this.$router.push('/customerservice')
    }
  }
}
</script>
<style scoped>
.content {
  background-color: #1989fa;
  height: 200px;
  position: relative;
}
.logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 30px;
}
.telnumber {
  color: #000;
  position: absolute;
  left: 86px;
  font-weight: 700;
  top: 34px;
  font-size: 14px;
  color: #fff;
}
.renzheng {
  width: 56px;
  height: 18px;
  color: #1989fa;
  background-color: #fff;
  position: absolute;
  left: 88px;
  top: 60px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  border-radius: 2px;
}
.bottom {
  position: absolute;
  bottom: 28px;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.bottom .item {
  display: flex;
  color: #fff;
  font-size: 15px;
  flex-direction: column;
  align-items: center;
}
i {
  font-style: normal;
  margin-top: 2px;
}
.line {
  height: 1px;
  width: 100%;
  background-color: #eee;
}
.ll {
  padding: 0 16px;
}
.bb {
  font-size: 16px;
  margin-top: 6px;
  margin-right: 3px;
}
.cc {
  margin-top: 4px;
}
.loginout {
  margin-left: 120px;
  margin-bottom: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>
